<template>
	<view style="height: 200rpx;"></view>
	<view class="tab-bar">
		<view v-for="(item, index) in tabbarStore.tabList" :key="index" class="tab-bar-item"
			:class="{ 'tab-active': props.selected === index }" @tap="switchTab(index)">
			<wd-badge :modelValue="item.msgCount" :max="99" :top="-5" :right="-5">
				<image v-if="item.isPublish" class="tab-bar-icon" src="/static/add.png" />
				<view class="tab-bar-text" :class="{ active: props.selected === index }"
					:style="{ color: props.selected === index ? '#0fdc78' : '#616161' }">
					{{ item.text }}
				</view>
			</wd-badge>
		</view>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { useTabbarStore } from '@/store/tabbar';

// 定义props
const props = defineProps({
	selected: {
		type: Number,
		default: 0
	}
});

// 获取store实例
const tabbarStore = useTabbarStore();

onShow(() => {
	tabbarStore.getMessageStats();
});

// 方法
const switchTab = (index) => {
	const page = tabbarStore.tabList[index];

	if (page.isPublish) {
		uni.navigateTo({
			url: page.pagePath
		});
	} else {
		uni.switchTab({
			url: page.pagePath
		});
	}
};
</script>

<style scoped>
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: #ffffff;
	display: flex;
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9999;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tab-bar-item {
	position: relative;
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	border-radius: 12px;
	margin: 8px 4px;
}

.tab-bar-item.tab-active {
	background-color: rgba(15, 220, 120, 0.1);
}

.tab-bar-normal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tab-bar-icon {
	width: 80rpx;
	height: 80rpx;
}

.tab-bar-text {
	font-size: 28rpx;
	line-height: 1.2;
	font-weight: 500;
	transition: color 0.3s ease;
}

.tab-bar-text.active {
	color: #0fdc78 !important;
	font-weight: 600;
}
</style>
